<template>
  <div class="home">
    <navbar>
      <div slot="center">首页</div>
    </navbar>
    <!-- <tab-control :titles="['畅销','新书','精选']"
                  @tabClick="tabClick"
                  ref="TabContrlo1"/> -->
    <scroll class="content" 
             ref="scroll"  
            :probe-type="3" 
            @scroll="contentscroll"
            :pull-up-load='true'
            @pullingUp="loadMore" >
        <swipe @swiperImageLoad='swiperImageLoad' :banners="banners"/>

        <recommend-view :reccommend="reccommend"/>

        <tab-control :titles="['畅销','新书','精选']"
                    @tabClick="tabClick"
                    ref="TabContrlo2"/>

        <goods-list :goods="goods[currentType].list"/>
    </scroll>
    <back-top @click.native="backclick()" v-show="isShowBaclTop"/>
  </div>
</template>
<script>
import Navbar from 'components/common/navbar/Navbar.vue'
<<<<<<< HEAD
import Swipe from "./ChildComps/Swipe.vue"
import RecommendView from './ChildComps/RecommendView.vue'
import TabControl from "components/content/tabControl/TabControl.vue"
import GoodsList from "components/content/goods/goodsList.vue"
import Scroll from "components/common/scroll/scroll.vue"
import BackTop from "components/content/backTop/BackTop.vue"
import {getHomeAllData,getHomeGoods} from "network/home"


=======
>>>>>>> location
export default {
  data() {
    return {
      reccommend:[],
      //商品数据模型
      goods: {
        'sales': { page: 0, list: [] },
        'new': { page: 0, list: [] },
        'recommend': { page: 0, list: [] },
      },
      //第一次展示sales
      currentType: 'sales', //记录当前要显示的tab-control
      //回到顶部
      isShowBaclTop:false,

      //吸顶效果
      istabFixed:false,

      //tab选项卡距离顶部默认为0 
      taboffsetTop: 0,

      //轮播图数据
      banners:[]
    }

  },
  components: {
    Navbar,
    RecommendView,
    Swipe,
    TabControl,
    GoodsList,
    Scroll,
    BackTop
  },
  created(){
    //获取推荐的数据
   this.getHomeAllData()

    //请求商品数据
    this.getHomeGoods('sales')
    this.getHomeGoods('new')
    this.getHomeGoods('recommend')
  },
  mounted(){
    //监听item图片加载完成 重新计算滚动内容
    this.$bus.$on("imageLoadLoad",()=>{
       this.$refs.scroll.refresh()
    })
  },
  methods:{
    //事件监听的方法
    tabClick(index) {
      
      switch (index) {
        case 0:
          this.currentType = 'sales'
          break;
        case 1:
          this.currentType = 'new'
          break;
        case 2:
          this.currentType = 'recommend'
          break;
      }
      //让两个TabContrlo保持一致
      // this.$refs.TabContrlo1.currentIndex = index
      // this.$refs.TabContrlo2.currentIndex = index
    },

    backclick(){
      //回到顶部 通过refs访问scroll组件调用方法
      this.$refs.scroll.scrollTo(0,0,500)
    },
    //回到顶部显示和隐藏
    contentscroll(position){
      this. isShowBaclTop = (-position.y) > 600

      //监听tabControl是否吸顶
      // this. isTabFixed = (-position.y) > this.taboffsetTop
    },

    //监听滚动到底部 发送网络请求
    loadMore(){
      this.getHomeGoods(this.currentType)
    },

    //监听轮播图加载完成在获取TabContrlo距离顶部的距离
    swiperImageLoad() {

      //获取TabContrlo的offsetTop 
      //每个组件都有一个属性$el 用于获取组件的元素
     this.taboffsetTop = this.$refs.TabContrlo2.$el.offsetTop
    },

    //网络请求相关
    getHomeAllData(){
      getHomeAllData().then(res=>{
       
        this.reccommend = res.goods.data
        this.banners = res.slides
      })
    },
    getHomeGoods(type){
      const page = this.goods[type].page+1
      getHomeGoods(type,page).then(res=>{
          console.log(res.goods.data);
          this.goods[type].list.push(...res.goods.data)

          //完成之后把页码加等于一
          this.goods[type].page+=1
         
         //完成上拉加载更多
         this.$refs.scroll.finishPullUp()

      })
    },
  }
}
</script>
<style scoped>
.home {
  height: 100vh;
  position: relative;
}
.content {
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
</style>
